<template>
  <div class="flight-item">
    <div @click="isshow=!isshow">
      <!-- 显示的机票信息 -->
      <el-row type="flex" align="middle" class="flight-info">
        <el-col :span="6"> <span>{{flightData.airline_name}} </span> {{flightData.flight_no}} </el-col>
        <el-col :span="12">
          <el-row
            type="flex"
            justify="space-between"
            class="flight-info-center"
          >
            <el-col :span="8" class="flight-airport">
              <strong>{{flightData.dep_time}}</strong>
              <span>{{flightData.org_airport_name + flightData.org_airport_quay}}</span>
            </el-col>
            <el-col :span="8" class="flight-time">
              <span>{{getDiff()}}</span>
            </el-col>
            <el-col :span="8" class="flight-airport">
              <strong>{{flightData.arr_time}}</strong>
              <span>{{flightData.dst_airport_name + flightData.dst_airport_quay}}</span>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="flight-info-right">
          ￥<span class="sell-price">{{flightData.base_price / 2}}</span>起
        </el-col>
      </el-row>
    </div>
    <div class="flight-recommend" v-if='isshow'>
      <!-- 隐藏的座位信息列表 -->
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="4">低价推荐</el-col>
        <el-col :span="20">
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            class="flight-sell"
            v-for='(item,index) in flightData.seat_infos' :key='index'
          >
            <el-col :span="16" class="flight-sell-left">
              <span>{{item.name}}</span> | {{item.supplierName}}
            </el-col>
            <el-col :span="5" class="price"> ￥{{item.org_settle_price}} </el-col>
            <el-col :span="3" class="choose-button">
              <el-button type="warning" size="mini" @click='jumpToOrder(item)'> 选定 </el-button>
              <p>剩余：{{item.discount}}</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
    props:{
        flightData:{
            required:true,
            type:Object,
            // 如果prop属性是对象或者数组类型，那么默认值的设置必须通过一个函数来设置
            default:() => {
                return {}
            }
        }
    },
    data () {
        return {
            isshow:false
        }
    },
    methods:{
      // 跳转到订单生成页
      jumpToOrder(item){
        console.log(this.flightData)
        this.$router.push(`/air/order?id=${this.flightData.id}&seat_xid=${item.seat_xid}`)
      },
        // 定义计算属性
        // 计算属性的特点
        // 1.看起来像函数，使用起来是一个属性,所以调用的时候不要加()
        // 2.需要人为调用
        // 3.一般会有返回值
        // 4.不能响应异步操作中的数据变化
        getDiff(){
            // 1.获取出发日期的时和分
            let cfsf = this.flightData.dep_time.split(':') // ["20","30"]
            let ddsf = this.flightData.arr_time.split(':') // ["22","50"]
            // console.log(cfsf,ddsf)
            // 通过每个时间的分来进行计算
            let cffz = cfsf[0] * 60 + +cfsf[1] // 出发时间所计算出来的分钟值
            let ddfz = ddsf[0] * 60 + (ddsf[1] - 0) // 到达时间所计算出来的分钟值
            // console.log(cffz,ddfz)
            // 计算到达时间和出发时间之间的差异
            let dis = ddfz - cffz
            if(dis < 0){ // 如果计算的结果小于0，说明是0点后，那么就需要在原先的计算结果上加1天
                dis = dis + 24 * 60
            }
            return `${Math.floor(dis/60)}时${dis%60}分`
        }
    }
};
</script>

<style lang="less" scoped>
.flight-item {
  border: 1px #ddd solid;
  margin-bottom: 10px;

  .flight-info {
    padding: 15px;
    cursor: pointer;

    > div {
      &:first-child,
      &:last-child {
        text-align: center;
      }
    }
  }

  .flight-info-center {
    padding: 0 30px;
    text-align: center;

    .flight-airport {
      strong {
        display: block;
        font-size: 24px;
        font-weight: normal;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }

    .flight-time {
      span {
        display: inline-block;
        padding: 10px 0;
        border-bottom: 1px #eee solid;
        color: #999;
      }
    }
  }

  .flight-info-right {
    .sell-price {
      font-size: 24px;
      color: orange;
      margin: 0 2px;
    }
  }
}

.flight-recommend {
  background: #f6f6f6;
  border-top: 1px #eee solid;
  padding: 0 20px;

  .flight-sell {
    border-bottom: 1px #eee solid;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    .flight-sell-left {
      font-size: 12px;
      span {
        color: green;
      }
    }

    .price {
      font-size: 20px;
      color: orange;
    }

    .choose-button {
      text-align: center;
      color: #666;
      button {
        display: block;
        width: 100%;
        margin-bottom: 5px;
      }
    }
  }
}
</style>